<template>
    <div class="box">
        <el-form
                :model="ruleForm" :rules="rules"
                :inline="false"
                ref="ruleForm"
                label-width="200px"
                class="demo-ruleForm"
                size="medium"
        >
            <div class="must">
                <el-form-item label="外国申请人的国内接收人：" prop="internal">
                    <el-input v-model="ruleForm.internal" placeholder="请填写国内接收人"></el-input>
                    <div class="inform">
                        <img src="../../assets/imgs/inform.png" alt="通知"/>
                        <div class="content">
                            <span>外国申请人应当在申请书中指定国内接收人负责接收国家知识产权局后继商标业务的法律文件</span>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item label="国内接收人地址：" prop="reAdd">
                    <el-input v-model="ruleForm.reAdd" placeholder="请填写国内接收人地址"></el-input>
                </el-form-item>

                <el-form-item label="邮政编码：" prop="rePost">
                    <el-input v-model="ruleForm.rePost" placeholder="请填写邮政编码"></el-input>
                </el-form-item>

                <el-form-item label=" 申请 / 展出国家 / 地区：" prop="region">
                    <el-input v-model="ruleForm.region" placeholder="请填写地区"></el-input>
                </el-form-item>
                <el-form-item label=" 申请 / 展出日期：" prop="date">
                    <el-date-picker
                            v-model="ruleForm.date"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期"
                            :style="{width:'100%'}"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label=" 申请号：" prop="loginNum">
                    <el-input v-model="ruleForm.loginNum" placeholder="请填写"></el-input>
                </el-form-item>
                <el-form-item label="国际分类：" prop="appModel">
                    <show @show="show" :appModel="Number(ruleForm.appModel)" style="margin:-20px 0 0 -20px"></show>
                </el-form-item>
                <el-form-item label="商标注册服务项目：">
                    <div>
                        <div v-for="(item,index) in ruleForm.serIte" :key="index">{{item}}
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="商标申请声明：">
                     <el-radio-group v-model="ruleForm.decTraAppModel"  text-color="#f00">
                         <el-radio  :label="3">一般</el-radio>
                        <el-radio  :label="1">集体商标</el-radio>
                        <el-radio  :label="0">证明商标</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="申请商标注册类型："  v-if="ruleForm.addsign==0">
                    <el-checkbox-group v-model="ruleForm.checkList">
                        <el-checkbox class="input" :label="2">以三维标志申请商标注册</el-checkbox>
                        <el-checkbox class="input" :label="3">以声音标志申请商标注册</el-checkbox>
                        <el-checkbox class="input" :label="4">以颜色组合申请商标注册</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="是否地理标志：" v-if="ruleForm.decTraAppModel!=3">
                    <el-radio-group v-model="ruleForm.addsign"  text-color="#f00">
                        <el-radio  :label="1">是</el-radio>
                        <el-radio  :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!--集体商标判断字段-->
                <div v-if="ruleForm.decTraAppModel==1" >
                    <el-form-item label="集体商标使用管理规则：" prop='jtuserule'>
                        <el-input type="textarea" rows="4" v-model="ruleForm.jtuserule"></el-input>
                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>管理规则内容以填写的为准</span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="集体商标使用管理规则(附件)：" prop='jtuserulefile'>
                        <!--<el-input v-model="ruleForm.test" ></el-input>-->
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'jtuserulefile'}" :list="ruleForm.jtuserulefile"></uploads>
                    </el-form-item>
                    <el-form-item label="集体成员：">
                        <both :callback="getBoth" :append="$store.state.alterData.append"
                              :class_id="$route.query.id"></both>
                    </el-form-item>
                    <el-form-item label="(附件)：" prop='jtusepepleotherfile'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'jtusepepleotherfile'}" :list="ruleForm.jtusepepleotherfile"></uploads>
                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>申请人需要上传的其他材料</span>
                            </div>
                        </div>
                    </el-form-item>
                </div>
                <!--证明商标-->
                <div v-if="ruleForm.decTraAppModel==0">
                    <el-form-item label="证明商标使用管理规则：" prop='zhengmingruletext'>
                        <el-input type="textarea" rows="4" v-model="ruleForm.zhengmingruletext"></el-input>
                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>请申请人根据所申请的商标类型(普通集体/地理标志集体/普通证明/地理标志证明商标)
                                    选择对应的商标使用管理规则填写，管理规则内容以填写的文本为准”。</span>
                            </div>
                        </div>
                    </el-form-item>

                    <el-form-item label="证明商标使用管理规则(附件)：" prop='zhengmingrule'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'zhengmingrule'}" :list="ruleForm.zhengmingrule"></uploads>
                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>请申请人根据所申请的商标类型(普通集体/地理标志集体/普通证
                                    明/地理标志证明商标)选择对应的商标使用管理规则上传</span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="(附件)：" prop='test'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'zhengmingrulefile'}" :list="ruleForm.zhengmingrulefile"></uploads>
                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>申请人需要上传的其他材料</span>
                            </div>
                        </div>
                    </el-form-item>
                </div>
                <!--地理商标字段-->
                <div v-if="ruleForm.addsign==1" >
                    <el-form-item label="地理标志材料一：" prop='gmaterials1'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'gmaterials1'}" :list="ruleForm.gmaterials1"></uploads>
                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>有关该地理标志产品客观存在及信誉情况的证明材料(包括:县志、农业志、产品志等复
                                印件;每份材料.上传封面页、版权页、相关地理标志记载页并加盖出具证明材料部门的公章)</span>

                            </div>
                        </div>
                    </el-form-item>

                    <el-form-item label="地理标志材料二：" prop='gmaterials2'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'gmaterials2'}" :list="ruleForm.gmaterials2"></uploads>

                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>地理标志证明商标所标示地区的人民政府或者行业主管部门(县处级以上)授权申请人申
                                请注册并监督管理该地理标志的文件
                                </span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="地理标志材料三：" prop='gmaterials3'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'gmaterials3'}" :list="ruleForm.gmaterials3"></uploads>

                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>请上传地理标志所标示的地域范围划分的相关文件、材料。(加盖出具单位公章)
                                </span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="地理标志材料四：" prop='gmaterials4'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'gmaterials4'}" :list="ruleForm.gmaterials4"></uploads>

                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>请上传地理标志产品的特定品质受特定地域环境或人文因素决定的说明(加盖出具单位公章)
                                </span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="地理标志材料五：" prop='test'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'gmaterials5'}" :list="ruleForm.gmaterials5"></uploads>
                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>申请人需要上传的其他材料
                                </span>
                            </div>
                        </div>
                    </el-form-item>
                </div>
                <!--是否具备检测能力-->
                <div v-if="ruleForm.decTraAppModel==0||ruleForm.decTraAppModel==1" >
                <!--<div v-if="ruleForm.decTraAppModel==0" >-->
                    <el-form-item label="申请人是否具备检测能力：">
                        <el-radio-group v-model="ruleForm.ischeckability"  text-color="#f00">
                            <el-radio  :label="1">是</el-radio>
                            <el-radio  :label="0">否</el-radio>
                        </el-radio-group>
                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>请选择证明商标是否具备检测能力。否:表示申
                                请人自身不具备检测能力，需委托具有检测资质的他人进行检测。
                                    是:表示申请人自身具有检测能力。
                                </span>
                            </div>
                        </div>
                    </el-form-item>

                </div>
                <!--申请人不具备检测能力-->
                <div v-if="(ruleForm.decTraAppModel==0||ruleForm.decTraAppModel==1)&&ruleForm.ischeckability==0">
                    <el-form-item label="申请人与具有检测资格的机构签署的委托检测合同(附件)：" prop='ischeckabilityfile1'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'ischeckabilityfile1'}" :list="ruleForm.ischeckabilityfile1"></uploads>

                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>请上传申请人与具有检测资格的机构签署的委托检测合同(盖双方公章)</span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="受委托机构的单位法人证书(附件)：" prop='ischeckabilityfile2'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'ischeckabilityfile2'}" :list="ruleForm.ischeckabilityfile2"></uploads>
                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>请上传受委托机构的单位法人证书(加盖受托单位公章)</span>

                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="受委托机构的资质证书(附件)：" prop='ischeckabilityfile3'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'ischeckabilityfile3'}" :list="ruleForm.ischeckabilityfile3"></uploads>

                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>请上传受委托机构的资质证书(加盖受托单位公章)</span>

                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="专业检测设备清单(附件)：" prop='ischeckabilityfile4'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'ischeckabilityfile4'}" :list="ruleForm.ischeckabilityfile4"></uploads>

                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>请上传专业检测设备清单(加盖受托单位公章)</span>

                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="专业技术人员名单(附件)：" prop='ischeckabilityfile5'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'ischeckabilityfile5'}" :list="ruleForm.ischeckabilityfile5"></uploads>

                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>请上传专业技术人员名单(加盖受托单位公章)</span>

                            </div>
                        </div>
                    </el-form-item>
                </div>
                <!--申请人具备检测能力-->

                <div v-if="(ruleForm.decTraAppModel==0||ruleForm.decTraAppModel==1)&&ruleForm.ischeckability==1">
                    <el-form-item label="申请人检测资质证书(附件)：" prop='test'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'shenqingnengfile1'}" :list="ruleForm.shenqingnengfile1"></uploads>
                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>若为非地理标志证明商标，请上传申请人所具有的资质证书(加盖申请人公章) ;若为地理标志
                                商标，请上传申请人所具有的资质证书(加盖申请人公章)或授权人民政府/行业主管部门出具的
                                    证明申请人具有检测能力的证明文件。
                                </span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="申请人专业检测设备清单(附件)：" prop='shenqingnengfile2'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'shenqingnengfile2'}" :list="ruleForm.shenqingnengfile2"></uploads>

                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>请上传申请人所具有的专业检测设备清单(加盖申请人公章)</span>

                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="申请人专业技术人员名单(附件)：" prop='shenqingnengfile3'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'shenqingnengfile3'}" :list="ruleForm.shenqingnengfile3"></uploads>

                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>请上传专业技术人员名单(加盖申请人公章)</span>

                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="申请人技术人员证书(附件)：" prop='test'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'shenqingnengfile4'}" :list="ruleForm.shenqingnengfile4"></uploads>
                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>请上传技术人员证书(加盖申请人公章)授权人民政府或行业主管部门门出具证明的需要上传此材
                                料</span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="专业技术人员名单(附件)：" prop='shenqingnengfile5'>
                        <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'shenqingnengfile5'}" :list="ruleForm.shenqingnengfile5"></uploads>
                        <div class="inform">
                            <img src="../../assets/imgs/inform.png" alt="通知"/>
                            <div class="content">
                                <span>请上传专业技术人员名单(加盖受托单位公章)</span>

                            </div>
                        </div>
                    </el-form-item>
                </div>
                <div class="line"></div>
                <el-form-item class="upload" label="商标样图：" prop="file_status">
                    <upfile :callback="getFile">
                        <img :src="old_imgs['file']" v-if="old_imgs['file']"/>
                    </upfile>
                    <div class="exam-img">
                        <div class="img-inform">
                            <img src="../../assets/imgs/inform.png">
                            <span>示例:</span>
                        </div>
                        <examimg :imgType="3"></examimg>
                    </div>
                    <p
                            class="imgHint"
                    >
                        提醒：左框为商标图样粘贴处。图样应当不大于1M。 以颜色组合或者着色图样申请商标注册的，应当提交着色图样并提交黑白稿1份；不指定颜色的，应当提交黑白图样。 以三维标志申请商标注册的，应当提交能够确定三维形状的图样，提交的商标图样应当至少包含三面视图。 以声音标志申请商标注册的，应当以五线谱或者简谱对申请用作商标的声音加以描述并附加文字说明； 无法以五线谱或者简谱描述的，应当使用文字进行描述；商标描述与声音样本应当一致。</p>
                    <!--</base-upload>-->
                </el-form-item>
                <el-form-item label="商标说明：">
                    <el-input type="textarea" rows="4" v-model="ruleForm.desc"></el-input>
                    <p
                            class="imgHint"
                    >
                        提醒：以三维标志、声音标志申请商标注册的，应当说明商标使用方式。以颜色组合申请商标注册的，应当提交文字说明，注明色标，并说明商标使用方式。商标为外文或者包含外文的，应当说明含义。自然人将自己的肖像作为商标图样进行注册申请应当予以说明。申请人将他人肖像作为商标图样进行注册申请应当予以说明，附送肖像人的授权书</p>
                </el-form-item>

                <el-form-item class="upload" label="网上确认书：" prop="qrfile_status">
                    <upfile :callback="setSure">
                        <img :src="old_imgs['qrfile']" v-if="old_imgs['qrfile']"/>
                    </upfile>
                    <div class="exam-img">
                        <div class="img-inform">
                            <img src="../../assets/imgs/inform.png">
                            <span>示例:</span>
                        </div>
                        <examimg :imgType="4"></examimg>
                    </div>
                    <div>
                        <span class="informs">
                            请点此
                            <a :href="mconfig.host + '/file/download?fileType=2'">下载网上确认书</a>,查到相应商标编号并填充
                        </span>
                        <br/>
                        <span class="notice">
                            请将下载的网上确认书填写完成, 然后上传JPG文件或是PNG文件
                        </span>
                    </div>
                </el-form-item>
                <el-form-item label="其他附件" prop="dengjichenluofile">
                  <uploads
                      :callback="backUrl"
                      :delUrl="delUrl"
                      :file_config="{field:'dengjichenluofile'}"
                      :list="ruleForm.dengjichenluofile"></uploads>
                  <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                      <span>提示：其他附件</span>
                    </div>
                  </div>
                </el-form-item>
                <div class="btns">
                    <el-button type="info" @click="outStep">上一步</el-button>
                    <el-button type="primary" @click="imgJudeg">提交并审核</el-button>
                </div>
                <el-dialog
                        class="dialog"
                        :show-close="false"
                        :center="true"
                        :visible.sync="dialogVisible"
                        width="460px"
                >
                    <div class="hint">
                        <img src="../../assets/imgs/branch.png" alt="提示图片"/>
                        <span>选择您想去办理的网点</span>
                    </div>

                    <el-form-item label="选择网点：" prop="branchNetworkId" >
                      <el-select v-model="branchNetworkId" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.deptId"
                          :label="item.deptName"
                          :value="item.deptId"
                        ></el-option>
                      </el-select>
                    </el-form-item>

                    <div slot="footer" class="dialog-footer">
                        <el-button type="info" @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                    </div>
                </el-dialog>
                <el-dialog
                        class="hintMsg"
                        :show-close="false"
                        title="温馨提示"
                        :visible.sync="centerDialogVisible"
                        width="462px"
                >
                    <span>您的信息已提交，工作人员将在3-5日内对你的信息审核，审核通过后即可预约业务，审核结果将通过短信的方式发送给你。</span>
                    <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="skip">确 定</el-button>
          </span>
                </el-dialog>
            </div>
        </el-form>
    </div>
</template>

<script>
    import BaseUpload from "./BaseUpload";
    import upfile from "../common/upfile";
    import both from "../common/both";
    import show from "../common/show";
    import examimg from "../common/imgExample";
    import uploads from "../common/uploads";
    export default {
        data() {
            return {
                flag: false,
                //网点列表
                options: [],
                //提交成功弹出框变量
                centerDialogVisible: false,
                //网点弹出框控制变量
                dialogVisible: false,
                //提交表单
                formData: new FormData(),
                //用于存储上传图片的数组
                confirmationimg: [],
                cancellationCommodity: "", //未提交分类填写
                creditCheckFlg: '',
                // add:0,
                //表单唯一id
                classId: "",
                secondmodel: [],
                stairmodel: [], //类别
                //共有人模板
                commoMount: {
                    name: "共有申请人名称(中文)：",
                    englishName: "(英文)：",
                    value: "",
                    englishValue: "",
                },
                commoArrMount: {
                    partNameCh: "",
                    partNameEn: "",
                },
                common: [],
                common_message: "",
                branchNetworkId: "",
                //填写的信息
                ruleForm: {
                    dengjichenluofile:[],
                    Linkman: "",
                    //organization: "",
                    internal: "",
                    region: "",
                    date: "",
                    desc: "",
                    type: "",
                    // 其他附件
                    // dengjichenluofile:[],
                    appModel: 1,
                    decTraAppModel: 3,
                    // addsign:0,
                    value: "",
                    loginNum: "",
                    checkList: [],
                    commonArr: [],
                    qrfile_status: "",
                    file_status: '',
                    reAdd: '',
                    rePost: '',
                    serIte: [],
                    addsign:0,
                    jtuserule:'',
                    jtuserulefile:[],//集体商标使用规则附件
                    jtusepepleotherfile:[],//集体成员名单其他附件
                    zhengmingruletext:'',//证明商标使用管理规则
                    zhengmingrule:[],//证明商标使用规则（附件）
                    zhengmingrulefile:[],//证明商标使用规则(其他附件)
                    ischeckability:0,//是否具备检测能力
                    gmaterials1:[],//地理标志材料一
                    gmaterials2:[],//地理标志材料二
                    gmaterials3:[],//地理标志材料三
                    gmaterials4:[],//地理标志材料四
                    gmaterials5:[],//地理标志材料五
                    ischeckabilityfile1:[],//申请人与具有检测资格的机构签署的委托检测合同（附件）
                    ischeckabilityfile2:[],//受委托机构的单位法人证书（附件）
                    ischeckabilityfile3:[],//受委托机构资质证书（附件）
                    ischeckabilityfile4:[],//专业检测设备清单（附件）
                    ischeckabilityfile5:[],//专业技术人员名单（附件）
                    shenqingnengfile1:[],//申请人专业检测设备清单(附件)
                    shenqingnengfile2:[],//申请人专业检测设备清单(附件)
                    shenqingnengfile3:[],//申请人专业技术人员名单
                    shenqingnengfile4:[],//申请人技术人员证书(附件)
                    shenqingnengfile5:[],//专业技术人员名单
                },
                commonArr: [],
                rules: {
                    Linkman: [{required: true, message: "请填写联系人", trigger: "blur"},
                        {
                            pattern: /[\u4e00-\u9fa5]/,
                            message: "联系人只能填写中文",
                            trigger: "blur",
                        },
                        {min: 2, max: 5, message: "联系人长度在2到5个字符之间", trigger: "blur"}],
                    //        organization: [{ required: true, message: "请填写", trigger: "blur" }],
                    internal: [{required: false, message: "请填写外国申请人的国内接收人", trigger: "blur"},
                        {
                            pattern: /[\u4e00-\u9fa5]/,
                            message: "国内接收人只能为中文",
                            trigger: "blur",
                        },
                        {min: 2, max: 5, message: "国内接收人长度在2到5个字符之间", trigger: "blur"}],

                    reAdd: [{required: false, message: "请填写国内接收人地址", trigger: "blur"}],

                    dengjichenluofile: [
                      { required: true, message: "附件不能为空", trigger: "change" },
                    ],

                    rePost: [{required: false, message: "请填写邮政编码", trigger: "blur"}],

                    region: [{required: false, message: "请填写申请 / 展出国家 / 地区", trigger: "blur"},
                        {
                            pattern: /[\u4e00-\u9fa5]/,
                            message: "申请 / 展出国家 / 地区只能填写中文",
                            trigger: "blur",
                        },
                        {min: 2, max: 20, message: "申请 / 展出国家 / 地区长度在2到20个字符之间", trigger: "blur"}],
                    date: [{required: false, message: "请选择展出日期", trigger: "blur"}],
//        desc: [{ required: true, message: "请填写", trigger: "blur" }],
                    appModel: [
                        {required: true, message: "请填写商标类别", trigger: "blur"},
                        // {message: "商标类别长度在1到50个字符之间", trigger: "blur"}
                        //{ type: 'number', message: "必须为数字值",trigger: "blur"  },
                    ],
                    decTraAppModel: [
                        {required: false, message: "请选择您的商标申请声明的商标类型", trigger: "blur"},
                    ],
                    loginNum: [
                        {required: false, message: "请填写申请号", trigger: "blur"},
                        {min: 2, max: 50, message: "申请号长度在2到50个字符之间", trigger: "blur"}
                        // { type: 'number', message: "必须为数字值",trigger: "blur"  },
                    ],
//          value: [{ required: true, message: "请选择网点", trigger: "blur" }],
                    file_status: [{required: true, message: "请上传商标图样", trigger: "blur"}],
                    qrfile_status: [{required: true, message: "请上传网上确认书", trigger: "blur"}],
                    // uploadAffirm: [{ required: true, message: '选项不能为空', trigger: 'change' }],
                    //"jtusepepleotherfile",//集体成员名单其他附件
                    // "zhengmingrulefile",//证明商标使用规则(其他附件)
                    jtuserulefile: [{required: true, message: "请上传集体商标使用规则附件", trigger: "blur"}],
                    jtuserule: [{required: true, message: "请上传集体商标使用管理规则", trigger: "blur"}],
                    zhengmingrule: [{required: true, message: "请上传证明商标使用规则（附件）", trigger: "blur"}],
                    gmaterials1: [{required: true, message: "请上传地理标志材料一", trigger: "blur"}],
                    gmaterials2: [{required: true, message: "请上传地理标志材料二", trigger: "blur"}],
                    gmaterials3: [{required: true, message: "请上传地理标志材料三", trigger: "blur"}],
                    gmaterials4: [{required: true, message: "请上传地理标志材料四", trigger: "blur"}],
                    ischeckabilityfile1: [{required: true, message: "请上传申请人与具有检测资格的机构签署的委托检测合同", trigger: "blur"}],
                    ischeckabilityfile3: [{required: true, message: "请上传受委托机构资质证书", trigger: "blur"}],
                    ischeckabilityfile4: [{required: true, message: "请上传专业检测设备清单", trigger: "blur"}],
                    ischeckabilityfile5: [{required: true, message: "请上传专业技术人员名单", trigger: "blur"}],
                    shenqingnengfile1: [{required: true, message: "请上传申请人专业检测设备清单", trigger: "blur"}],
                    shenqingnengfile2: [{required: true, message: "请上传申请人专业检测设备清单", trigger: "blur"}],
                    shenqingnengfile3: [{required: true, message: "请上传申请人专业技术人员名单", trigger: "blur"}],
                    shenqingnengfile5: [{required: true, message: "请上传专业技术人员名单", trigger: "blur"}],
                },
                old_imgs: {},
            };
        },
        created() {

        },
        computed: {
            imgData() {
                //若存在则显示
                if (this.$store.state.stateJdg) {
                    return this.$store.state.alterData.public.busimg;
                }
                return "";
            }
        },
        mounted() {

            //获取从存储在路由中的classId
            this.classId = this.$route.query.id;
            //获取网点列表
            this.$http.get("trademark/system/dept/findDept").then((res) => {
                this.options = res.data.data;
            });
            //获取分类列表
            this.$http.get("trademark/tradeCategory/p").then((res) => {
                this.stairmodel = res.data.data;
            });
            if (this.$store.state.alterData.public) {
                let formDa = {};
                this.ruleForm.qrfile_status = "1";
                this.ruleForm.file_status = "1";
                Object.assign(
                    formDa,
                    this.$store.state.alterData.data,
                    this.$store.state.alterData.public
                );
                let {
                    otherfile,
                    contacts,
                    ageName,
                    appNum,
                    append,
                    appCount,
                    appDate,
                    creditCheckFlg, //商品/服务项目（分类填写）
                    decTraAppModel,
                    decTraApp,
                    file,
                    appExpl,
                    appModel,
                    classId,
                    branchNetworkId,
                    busimg,
                    receCn,
                    receAddCn,
                    recePost,
                    serIte,
                    qrfile,
                    appImgAdd,
                    cancellationCommodity,
                    addsign,
                    jtuserule,
                    jtuserulefile,
                    jtusepepleotherfile,
                    zhengmingruletext,
                    zhengmingrule,
                    zhengmingrulefile,
                    ischeckability,
                    gmaterials1,
                    gmaterials2,
                    gmaterials3,
                    gmaterials4,
                    gmaterials5,
                    ischeckabilityfile1,
                    ischeckabilityfile2,
                    ischeckabilityfile3,
                    ischeckabilityfile4,
                    ischeckabilityfile5,
                    shenqingnengfile1,
                    shenqingnengfile2,
                    shenqingnengfile3,
                    shenqingnengfile4,
                    shenqingnengfile5,
                } = formDa;
                this.ruleForm.Linkman = contacts;
                //      this.ruleForm.organization = ageName;
                this.ruleForm.serIte = JSON.parse(serIte);
                this.ruleForm.loginNum = appNum;
                this.ruleForm.region = appCount;
                this.ruleForm.date = appDate;
                this.ruleForm.reAdd = receAddCn;
                // 添加其他附件
                this.ruleForm["dengjichenluofile"] = JSON.parse(otherfile);
                this.ruleForm.rePost = recePost;
                this.ruleForm.checkList = JSON.parse(decTraApp);
                this.ruleForm.internal = receCn;
                // this.confirmationimg[0] = file internal
                this.ruleForm.desc = appExpl;
                this.ruleForm.appModel = appModel;

                this.ruleForm.addsign = addsign;

                // this.ruleForm["dengjichenluofile"] = JSON.parse(otherfile);
                this.ruleForm.jtuserulefile = JSON.parse(jtuserulefile);
                this.ruleForm.jtuserule = jtuserule;
                this.ruleForm.jtusepepleotherfile = JSON.parse(jtusepepleotherfile);
                this.ruleForm.zhengmingruletext = zhengmingruletext;
                this.ruleForm.zhengmingrule = JSON.parse(zhengmingrule);
//                this.ruleForm.zhengmingrule = zhengmingrule;
                this.ruleForm.zhengmingrulefile = JSON.parse(zhengmingrulefile);

                this.ruleForm.ischeckability = ischeckability;
                this.ruleForm.gmaterials1 = JSON.parse(gmaterials1);
                this.ruleForm.gmaterials2 =JSON.parse( gmaterials2);
                this.ruleForm.gmaterials3 = JSON.parse(gmaterials3);
                this.ruleForm.gmaterials4 =JSON.parse( gmaterials4);
                this.ruleForm.gmaterials5 =JSON.parse( gmaterials5);

                this.ruleForm.ischeckabilityfile1 = JSON.parse(ischeckabilityfile1);
                this.ruleForm.ischeckabilityfile2 = JSON.parse(ischeckabilityfile2);
                this.ruleForm.ischeckabilityfile3 = JSON.parse(ischeckabilityfile3);
                this.ruleForm.ischeckabilityfile4 = JSON.parse(ischeckabilityfile4);
                this.ruleForm.ischeckabilityfile5 = JSON.parse(ischeckabilityfile5);
                this.ruleForm.shenqingnengfile1 =JSON.parse( shenqingnengfile1);
                this.ruleForm.shenqingnengfile2 = JSON.parse(shenqingnengfile2);
                this.ruleForm.shenqingnengfile3 = JSON.parse(shenqingnengfile3);
                this.ruleForm.shenqingnengfile4 = JSON.parse(shenqingnengfile4);
                this.ruleForm.shenqingnengfile5 = JSON.parse(shenqingnengfile5);
                // this.tags
                this.classId = classId;
                this.creditCheckFlg = JSON.parse(serIte), //注销商品/服务项目（分类填写）
                    // this.tags = this.creditCheckFlg;

                this.ruleForm.value = String(branchNetworkId);
                if (branchNetworkId = this.options.deptId) {
                }
                if (qrfile) {
                    this.ruleForm.qrfile_status = "1"
                    this.$set(this.old_imgs, "qrfile", this.mconfig.host + qrfile);
                }
                if (appImgAdd) {
                    this.ruleForm.file_status = "1"
                    this.$set(this.old_imgs, "file", this.mconfig.host + appImgAdd);
                }

                this.ruleForm.commonArr = this.$store.state.alterData.append;
                this.ruleForm.commonArr.map((item) => {
                    if (item.partNameCh) {
                        let arr = {};
                        arr.name = "共有申请人名称(中文)：",
                            arr.englishName = "(英文)：",
                            arr.value = item.partNameCh;
                        arr.englishValue = item.partNameEn;
                        this.common.push(arr);
                    }
                });
            }

        },
        watch: {
            //通过数据监听的方式将共有人模板中的信息同步到ruleForm.commonArr中
            common: {
                handler(newName, oldName) {
                    this.common.forEach((item, index) => {
                        if (!this.ruleForm.commonArr[index]) {
                            this.ruleForm.commonArr[index] = {}
                        }
                        this.ruleForm.commonArr[index].partNameCh = item.value;
                        this.ruleForm.commonArr[index].partNameEn = item.englishValue;
                    });
                },
                deep: true,
            },
            "ruleForm.appModel"(newsval, oldval) {
//                if (newsval != oldval) {
//                    this.$http.get(`trademark/tradeCategory/fs?pid=${newsval}`).then((res) => {
//                        this.secondmodel = res.data.data;
//                    });
//                }
            },
            "ruleForm.decTraAppModel"(newsval, oldval){
//                this.plus()
            },
            "ruleForm.addsign"(newval,old){
                //地理标志修改,申请注册类型要清空
                this.ruleForm.checkList=[]
                let arr=[
                     "gmaterials1",//地理标志材料一
                    "gmaterials2",//地理标志材料二
                    "gmaterials3",//地理标志材料三
                    "gmaterials4",//地理标志材料四
                    "gmaterials5",//地理标志材料五
                ]
                if(newval==0){
                    arr.map(item=>{
                        this.ruleForm[item]=[]
                    })
                }
            },
            "ruleForm.ischeckability"(newval,old){
                //检测能力转化
                let arr0=[
                    "shenqingnengfile1",//申请人专业检测设备清单
                    "shenqingnengfile2",//申请人专业检测设备清单
                    "shenqingnengfile3",//申请人专业技术人员名单
                    "shenqingnengfile4",//申请人技术人员证书
                    "shenqingnengfile5"//专业技术人员名单
                ]//没有检测能力时清空的字段
                let arr1=[
                    "ischeckabilityfile1",//申请人与具有检测资格的机构签署的委托检测合同
                    "ischeckabilityfile2",//受委托机构的单位法人证书
                    "ischeckabilityfile3",//受委托机构资质证书
                    "ischeckabilityfile4",//专业检测设备清单
                    "ischeckabilityfile5",//专业技术人员名单
                ]//有检测能力的时候清空的字段
                if(newval==0){
                    arr0.map(item=>{
                        this.ruleForm[item]=[]
                    })
                }else{
                    arr1.map(item=>{
                        this.ruleForm[item]=[]
                    })
                }
            },
            "ruleForm.decTraAppModel"(newval,old){
                //商标声明类型修改,有些字段需要重置

                let addsign0=[
                    "jtuserulefile",//集体商标使用规则附件
                    "jtusepepleotherfile",//集体成员名单其他附件
                ]//当证明商标时需要清空的字段
                let addsign1=[
                    "zhengmingrule",//证明商标使用规则（附件）
                    "zhengmingrulefile",//证明商标使用规则(其他附件)
                ]//当集体商标时需要清空的字段
                let addsign3=[
                    "jtuserulefile",//集体商标使用规则附件
                    "jtusepepleotherfile",//集体成员名单其他附件
                    "zhengmingrule",//证明商标使用规则（附件）
                    "zhengmingrulefile",//证明商标使用规则(其他附件)
                    "gmaterials1",//地理标志材料一
                    "gmaterials2",//地理标志材料二
                    "gmaterials3",//地理标志材料三
                    "gmaterials4",//地理标志材料四
                    "gmaterials5",//地理标志材料五
                    "ischeckabilityfile1",//申请人与具有检测资格的机构签署的委托检测合同
                    "ischeckabilityfile2",//受委托机构的单位法人证书
                    "ischeckabilityfile3",//受委托机构资质证书
                    "ischeckabilityfile4",//专业检测设备清单
                    "ischeckabilityfile5",//专业技术人员名单
                    "shenqingnengfile1",//申请人专业检测设备清单
                    "shenqingnengfile2",//申请人专业检测设备清单
                    "shenqingnengfile3",//申请人专业技术人员名单
                    "shenqingnengfile4",//申请人技术人员证书
                    "shenqingnengfile5"//专业技术人员名单
                ]//当一般商标时需要清空的字段
                if(newval==3){
                    //一般类型
                    this.ruleForm.addsign=0
                    addsign3.map(item=>{
                        this.ruleForm[item]=[]
                    })
                    this.commonArr=[]
                }else if(newval==0){
                    //证明商标
                    addsign0.map(item=>{
                        this.ruleForm[item]=[]
                    })
                    this.commonArr=[]
                }else{
                    //集体商标
                    addsign1.map(item=>{
                        this.ruleForm[item]=[]
                    })
                }
            }
        },
        methods: {
            changeAppModel(value){
                this.ruleForm.appModel=value
            },
            show(data){
                if (data.length != 0) {
                    this.ruleForm.appModel = data[0].parent;
                }
                this.creditCheckFlg = data.map(item => item.category);
                tags:[],
                    this.ruleForm.serIte = data.map(item => item.category);
                if (data.length == 0) {
                    this.tags = [];
                }
            },
            getBoth(value){
                // console.log(value,145645);
                this.commonArr = value;
            },
            radioChange(){
                this.flag = !this.flag;
            },
            //确认书
            setSure(files) {
                if (files.length > 0) {
                    this.ruleForm.qrfile_status = "1"
                } else {
                    this.ruleForm.qrfile_status = ""
                }
                this.ruleForm.qrfile = files[0];
                let old = JSON.parse(JSON.stringify(this.old_imgs));
                this.old_imgs = {};
                delete old["qrfile"];
                this.old_imgs = old;
            },
            dele() {
                this.common.pop();
                this.ruleForm.commonArr.pop();
            },
            //返回上一步
            outStep() {
                this.$emit("wp", 1, "请填写申请业务信息");
            },
            //点击提交并审核触发
            imgJudeg() {

//                console.log(status,454)
                this.$refs["ruleForm"].validate((valid) => {
                    if (valid) {
                        //验证不能控制的字段
                        this.dialogVisible = true;
                    } else {
                        this.open1("存在错误的格式填写", "error")
                    }
                })

            },
            open() {
            },

            //提示模板
            open1(msg, types = "success") {
                this.$message({
                    message: msg,
                    type: types,
                });
            },

            //表单提交事件
            submitForm(formName) {
                let _this = this;
                if (this.branchNetworkId === "") {
                    this.$message({
                        type: "error",
                        message: "请选择网点"
                    })
                    return
                }
                this.$refs[formName].validate((valid) => {

                    if (valid) {
                        //每次提交重新生成新的FormData用于储存新的数据
                        this.formData = new FormData();
                        this.dialogVisible = false;
                        //获取vuex中保存的步骤二中的数据
                        let {
                            name,
                            names,
                            englishName = "",
                            site,
                            englishSite = "",
                            number, //营业执照编号
                            numbers, //身份证号
                            person_type,
                            phone,
                            province,
                            city,
                            legal,
                            postal = 61000,
                            nationality = "中国", //申请人国籍
                        } = this.$store.state.storeDatas;
                        // console.log(this.ruleForm, this.confirmationimg[0], this.classId);
                        this.ruleForm.commonArr = this.commonArr;
                        //向FormData中添加数据

                        let new_arr=[
                            "jtuserulefile",
                            "jtusepepleotherfile",
                            "zhengmingrule",
                            "zhengmingrulefile",
                            "gmaterials1",
                            "gmaterials2",
                            "gmaterials3",
                            "gmaterials4",
                            "gmaterials5",
                            "jtuserule",
                            "ischeckabilityfile1",
                            "ischeckabilityfile2",
                            "ischeckabilityfile3",
                            "ischeckabilityfile4",
                            "ischeckabilityfile5",
                            "shenqingnengfile1",
                            "shenqingnengfile2",
                            "shenqingnengfile3",
                            "shenqingnengfile4",
                            "shenqingnengfile5"]
                        new_arr.map(item=>{
                            this.formData.append(item,JSON.stringify(this.ruleForm[item]));
                        })
                        let arrs=[
                            "addsign",
                            "zhengmingruletext",
                            "ischeckability",
                        ]
                        arrs.map(item=>{
                            this.formData.append(item,this.ruleForm[item]);
                        })
                        this.formData.append("contacts", this.ruleForm.Linkman);
                        this.formData.append("receAddCn", this.ruleForm.reAdd);
                        this.formData.append("recePost", this.ruleForm.rePost);
                        // 其他附件
                        // this.formData.append("otherfile", JSON.stringify(this.ruleForm.dengjichenluofile));
                        this.formData.append("decTraAppModel", this.ruleForm.decTraAppModel);
                        this.formData.append("decTraApp", JSON.stringify(this.ruleForm.checkList));
                        this.formData.append("serIte", JSON.stringify(this.creditCheckFlg)), //注销商品/服务项目（分类填写）);
                            //this.formData.append("multipartFile", this.confirmationimg[0]);
                            this.formData.append(
                                "file",
                                this.old_imgs.file ? {} : this.confirmationimg[0]
                            );
                        this.formData.append(
                            "qrfiles",
                            this.old_imgs.qrfile ? {} : this.ruleForm.qrfile
                        );
                        this.formData.append("classId", this.classId);
                        this.formData.append("receCn", this.ruleForm.internal); //国内接收人

                        this.formData.append("branchNetworkId", this.branchNetworkId);
                        this.formData.append(
                            "proAppends",
                            JSON.stringify(this.ruleForm.commonArr)
                        );
                        this.formData.append("otherfile", JSON.stringify(this.ruleForm.dengjichenluofile)); //其他出质人
                        this.formData.append("appNum", this.ruleForm.loginNum);
                        this.formData.append("appCount", this.ruleForm.region);
                        this.formData.append("appDate", this.ruleForm.date);
                        this.formData.append("appExpl", this.ruleForm.desc);
                        this.formData.append("appModel", this.ruleForm.appModel);
                        let arr = this.$store.getters.getRuleForm;
                        for (let key in arr) {
                            this.formData.append(key, arr[key]);
                        }
                        // this.formData.append("userId", "2");
                        let urls = "";
                        if (this.$store.state.alterData.public) {
                            this.formData.append("id", this.$store.state.alterData.public.id);
                            urls = "trademark/proTRegMark/modifyNoCommit";
                        } else {
                            urls = "trademark/proTRegMark/firstSubmit";
                        }
                        //配置请求头
                        var config = {
                            header: {
                                "Content-Type": "multipart/form-data",
                            },
                        };
                        this.$http
                            .post(urls, this.formData, config)
                            .then(function (response) {
                                //若状态码不为200则不跳转v bvb vvccvb vbvbcgvbc
                                if (response.data.code != 200) {
                                    _this.open1("提交失败", "error");
                                    return;
                                }
                                //提交成功
                                _this.centerDialogVisible = true;
                                this.$store.commit("storeDatas", {});
                                this.$store.commit("setPicType", 0);
                                this.$store.commit("setCompanyCardInfo", {});
                                this.$store.commit("setIdCardInfo", {});
                            })
                            .catch(function (error) {
                            });
                    } else {
                        this.dialogVisible = false
                        return false;
                    }
                });

            },
//            handleCheckedCitiesChange(value) {
//                let arr = [];
//                this.secondmodel.forEach((item) => {
//                    value.forEach((i) => {
//                        if (item.id == i) {
//                            arr.push(item.id);
//                        }
//                    });
//                });
//                this.ruleForm.cancellationCommodity = arr;
//            },
            //跳转函数
            skip() {
                this.centerDialogVisible = false;
                this.open1("操作成功");
                this.$router.push({
                    path: "/business/myBusiness/auditing",
                });
            },
            //重置表单函数(没用上)
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //获取图片列表
            getFile(data2) {
                if (data2.length > 0) {
                    this.ruleForm.file_status = "1"
                } else {
                    this.ruleForm.file_status = ""
                }
                this.confirmationimg = data2;
                let old = JSON.parse(JSON.stringify(this.old_imgs));
                this.old_imgs = {};
                old["file"] = ""
                this.old_imgs = old;
            },
            //点击添加更变许可人
            plus() {
                let objCommom = JSON.parse(JSON.stringify(this.commoArrMount));
                this.ruleForm.commonArr.push(objCommom);
                //let objValue = JSON.parse(JSON.stringify(this.common[0]))
                if (this.common.length == 0 || this.common[this.common.length - 1]["value"]) {
                    this.common.push({
                        name: "共有申请人名称(中文)：",
                        englishName: "(英文)：",
                        value: "",
                        englishValue: "",
                    });
                } else {
                    this.common_message = "其他共有申请人的姓名不可为空"
                    setTimeout(() => {
                        this.common_message = ""
                    }, 2000)
                }
                // this.add++;
            },
            backUrl(url,file_config){
                this.ruleForm[file_config["field"]].push(url)
            },
            delUrl(index,file_config){
                this.ruleForm[file_config["field"]].splice(index,1)
                this.$set(this.ruleForm,file_config["field"],this.ruleForm[file_config["field"]])
            }
        },
        filters: {
            arrToString(value){
                return JSON.stringify(value)
            }
        },
        components: {
            BaseUpload,
            upfile,
            both,
            show,
            examimg,
            uploads
        },

    };
</script>
<style lang="less" scoped>
    .btns {
        display: flex;
        justify-content: center;
        .el-button {
            margin: 0 20px;
        }
    }

    .box {
        display: flex;
        flex-direction: column;
        align-items: center;
        // margin-top: 100px;
        width: 100%;
        min-height: 800px;
        .tle {
            font-size: 24px;
            color: #000;
        }
        .el-form {
            width: 100%;
        }
        .must,
        .select {
            display: flex;
            position: relative;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 30px 0 30px;
            margin-bottom: 80px;
            width: 100%;
            // border: 1px solid #bbbbbb;
            border-radius: 10px;
            .el-form-item {
                width: 680px;
            }
            .inline {
                display: flex;
                .el-form-item {
                    margin: 0;
                    width: 290px !important;
                }
            }
        }
        .must {
            margin-bottom: 20px;
            padding-right: 140px;
        }
        .upload-box {
            display: flex;
            justify-content: space-around;
            position: relative;
        }
        .exam-img{
        position: absolute;
        top: 0;
        left: 465px;
        }
        .img-inform{
        img{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -140px;
            transform: translate(-50%,-50%);
        }
        span{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            white-space: nowrap;
            margin-left: -100px;
            width: 50px;
            color: #f96900;
        }
        }
        .line {
            width: calc(100% - 280px);
            margin: 30px auto;
            height: 1px;
            border-top: 1px dashed #d9d9d9;
        }
        .imgHint {
            margin: 5px;
            font-size: 12px;
            line-height: 17px;
            color: #f5222d;
        }
        .affirm {
            font-size: 12px;
            color: #a0a3a5;
            a {
                text-decoration: none;
                color: #3685ff;
            }
        }
        .input {
            width: 190px;
        }
        .upload {
            margin: 20px 0;
        }
        .type-number {
            width: 250px;
        }
        .informs {
            position: absolute;
            width: 500px;
            font-size: 12px;
            color: #a0a3a5;
            a {
                text-decoration: none;
                color: #3685ff;
            }
        }
        .inform {
            display: flex;
            align-items: center;
            position: absolute;
            top: 0;
            left: 100%;
            width: 280px;
            height: 32px;
            color: #f5222d;
            font-size: 10px;
            line-height: 14px;
            img {
                margin: 11px;
            }
            .content {
                width: 20em;
                display: flex;
                flex-direction: column;
                .ts {
                    text-indent: 3em;
                }
                span{
                    // white-space: pre-line;
                    line-height: 1.5em;
                    word-wrap: break-all;
                }
            }
        }
        .notice {
            color: #f00;
            font-size: 12px;
        }
        .tle {
            list-style: none;
            margin: 40px 0 20px;
            font-size: 24px;
            & ~ .tle {
                color: #bbb;
            }
        }
        .hint {
            color: #f5222d;
            background-color: #fff;
            .el-form-item__label {
                width: 150px;
            }
            img {
                width: 20px;
            }
        }
        .el-steps {
            width: 70%;
            height: 200px;
        }
        .el-button {
            //display: block;
            display: inline;
            margin: 0 20px;
            // background-color: #67c23a !important;
            // border-color: #67c23a !important;
        }

        .common .el-button {
            background-color: #fff !important;
            border-color: #bbb !important;
        }
    }

    .dialog-footer {
        display: flex;
        justify-content: space-between;
        color: #fff;
        .lan {
            color: #fff;
            background-color: #2c9dfc !important;
            border-color: #2c9dfc !important;
        }
    }

    .dialog /deep/ .el-form-item__label {
        width: 100px !important;
    }

    .dialog /deep/ .el-form-item__content {
      display: flex;
      justify-content: left;
      margin-left: 100px !important;
        
    }

    .dialog /deep/ .el-input {
        width: 250px;
    }

    .el-checkbox-group {
        line-height: 14px;
    }

    .el-radio /deep/ .el-radio__inner:hover {
        border-color: #999999 !important;
    }

    .is-checked /deep/ .el-radio__label,
    .is-checked /deep/ .el-checkbox__label {
        color: #333;
    }

    .is-focus .el-checkbox__inner {
        border-color: #999999 !important;
    }

    .el-checkbox /deep/ .el-checkbox__inner:hover {
        border-color: #999999 !important;
    }

    .el-step__head.is-process {
        border-color: #f96900;
        color: #f96900 !important;
    }

    .hintMsg {
        /deep/ .el-dialog__header {
            display: flex;
            justify-content: center;
            font-weight: bold;
        }
        .dialog-footer {
            justify-content: center;
            .el-button {
                border-color: #2c9dfc !important;
                background: #2c9dfc !important;
            }
        }
    }

    //其他共有申请人按钮位置
    .btn-groun {
        text-align: center;
    }

    .common_message {
        font-size: 8px;
        color: #f56c6c;
        padding-left: 205px;
        position: absolute;
        top: 97px;
    }
    /deel/.el-dialog--center, .el-dialog--center {
      text-align: left !important;
    }
</style>
